<template>
  <el-row >
    <el-col :span="2">
      <ul class="topic-list">
        <p>产品</p>
        <li><a href="" class="topic">烹饪</a></li>
        <li><a href="" class="topic">洗涤</a></li>
        <li><a href="" class="topic">冷藏</a></li>
        <li><a href="" class="topic">净饮</a></li>
        <li><a href="" class="topic">织物护理</a></li>
      </ul>
    </el-col>
    <el-col :span="2">
      <ul class="topic-list">
        <p>美学</p>
        <li><a href="" class="topic">产品系列</a></li>
        <li><a href="" class="topic">设计哲学</a></li>
        <li><a href="" class="topic">网上展厅</a></li>
      </ul>
    </el-col>
    <el-col :span="2">
      <ul class="topic-list">
        <p>品牌</p>
        <li><a href="" class="topic">品牌理念</a></li>
        <li><a href="" class="topic">创新科技</a></li>
        <li><a href="" class="topic">品牌溯源</a></li>
      </ul>
    </el-col>
    <el-col :span="2">
      <ul class="topic-list">
        <p>服务</p>
        <li><a href="" class="topic">售后服务</a></li>
        <li><a href="" class="topic">高端定制</a></li>
      </ul>
    </el-col>
    <el-col :span="3" :offset="13">
      <el-row>
        <el-col :span="24" class="footer-img">
          <el-image class="footer-img-left" src="src/assets/logo_jiu.png" />
          <span class="footer-img-split">|</span>
          <el-image class="footer-img-right" src="src/assets/Infinito-Cucina.jpg" />
        </el-col>
      </el-row>
      <div>
        <el-image class="footer-to-top" src="src/assets/to-top.png" @click="scrollToTop"/>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="2">
      <el-image class="media-icon" src="src/assets/facebook.png"/>
      <el-image class="media-icon" src="src/assets/twitter.png"/>
      <el-image class="media-icon" src="src/assets/instagram.png"/>
      <el-image class="media-icon" src="src/assets/skye.png"/>
    </el-col>
  </el-row>
</template>

<script>
export default {
  methods:{
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.topic-list{
  color: white;
  font-size: 1rem;
  // margin-left: 70px;
  list-style: none;
  padding: 0;
  text-align: left;
}

.topic-list li{
  line-height: 2.3rem;
}

.topic {
  color: rgb(139, 139, 139);  
  text-decoration:none;
}

.topic:hover {
  color: rgb(230, 230, 230);
}

.footer-img{
  margin-bottom: 10%;
}

.footer-img-left{
  height: 40px;
  text-align: left;
  float: left;
  margin-left: 0;
}

.footer-img-split{
  color: rgb(139, 139, 139);
  font-size: 1rem;
  text-align: center
}

.footer-img-right{
  height: 40px;
  text-align: right;
  float:right;
}

.footer-to-top{
  margin-top: 20px;
  height: 40px;
  float: right;
  cursor: pointer;
}

.media-icon{
  height: 40px;
}

</style>